<template>
	<view class="content">
		<view class="top-bar">
			<view class="search-view">
				<input type="search" class="search" placeholder="搜索用户" placeholder-style="color:#aaa;font-weight:300;font-size:26rpx;"
				 @input="search">
				<view class="searchicon iconfont">&#xe633;</view>
			</view>
			<view class="top-bar-right">
				<view class="text" @tap="back">取消</view>
			</view>
		</view>
		<view class="main">
			<view class="search-user search-result">
				<view class="title" v-if="userArr.length>0">用户</view>
				<view class="list userlist" v-for="(item,index) in userArr" :key="index">
					<navigator :url="'../userhome/userhome?id='+item._id">
						<image :src="item.imgurl"></image>
					</navigator>
					<view class="name" v-html="item.name"></view>
					<view class="list-right send" v-if="item.tip===1" @tap="toChatroom(item._id)">发消息</view>
					<view class="list-right add" v-if="item.tip===0" @tap="addFriendSubmit(item._id)">加好友</view>
					<view class="list-right send" style="background-color: #FFFFFF;" v-if="item.tip===2"></view>
				</view>
			</view>
		</view>
		<view class="modify" :style="{bottom: '-'+mHeight}" :animation="animationData">
			<view class="modify-header">
				<view class="modify-close" @tap="addFriendCancel">取消</view>
				<view class="modify-title">添加好友</view>
				<view class="modify-ok" @tap="addFriendConfirm">发送</view>
			</view>
			<view class="modify-main">
				<textarea v-model="submitData" class="modify-data" placeholder="在此输入验证信息"
				 placeholder-style="color: #aaa"/>
			</view>
		</view>
	</view>
</template>

<script>
	import datas from '../../commons/js/data.js'
	import tools from '../../commons/js/tools.js'
	export default {
		data() {
			return {
				storageData: '',
				userArr: [],
				uid: '',
				fid: '', //好友id
				//弹框动画
				animationData: {},
				//动画开关
				isModify: false,
				//页面高度
				mHeight: '',
				//修改区域的内容
				submitData: '',
			};
		},
		onLoad() {
			this.getStorages()
		},
		onShow() {
			try {
			    const value = uni.getStorageSync('user');
			    if (value) {
			        this.storageData = value
			    }
			} catch (e) {
			    // error
			}
			if(!this.storageData.token){
				uni.navigateTo({
					url: '../login/login'
				})
			}
		},
		onReady() {
			this.getElementStyle()
		},
		methods: {
			//获取本地缓存
			getStorages: function() {
				try {
				    const value = uni.getStorageSync('user');
				    if (value) {
				        this.uid = value.id
				    }
				} catch (e) {
					//没有缓存跳转到登录页面
				    uni.navigateTo({
				    	url: '../index/index'
				    })
				}
			},
			// 获取输入框的关键词
			search: tools.debounce(function(e){
				this.userArr = []
				let searchResult = e.detail.value
				if(searchResult.length > 0) {
					this.searchUser(searchResult)
				}
			},500),
			//寻找关键词匹配的用户
			searchUser: function(e) {
				uni.request({
					url: this.baseURL+'/search/user',
					data: {
						name: e
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							let arr = data.data.result
							for(let i = 0; i < arr.length; i++) {
								this.isFriend(arr[i],e)
							}
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//判断是否为好友
			isFriend: function(arr,e) {
				//动态拼接正则
				let exp = eval("/"+e+"/g")
				let tip = 0
				if(arr._id === this.uid){
					tip = 2
					arr.tip = tip
					arr.imgurl = this.baseURL+arr.imgurl
					arr.name = arr.name.replace(exp, "<span style='color:#27d68d'>"+e+"</span>")
					this.userArr.push(arr)
				}else{
					uni.request({
						url: this.baseURL+'/search/isfriend',
						data: {
							uid: this.uid,
							fid: arr._id
						},
						method: 'POST',
						success: (data) => {
							let status = data.data.status
							if (status === 200) {
								//是好友
								tip = 1
							}else if(status === 400){
								//不是好友
								tip = 0
							} else if (status === 500) {
								uni.showToast({
									title: '服务器发生错误!',
									icon: 'none',
									duration: 2000
								})
							}
							arr.tip = tip
							arr.imgurl = this.baseURL+arr.imgurl
							arr.name = arr.name.replace(exp, "<span style='color:#27d68d'>"+e+"</span>")
							this.userArr.push(arr)
						}
					})
				}
			},
			//返回上一级
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取页面高度
			getElementStyle: function() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.modify').boundingClientRect(data => {
				  this.mHeight = data.height+'px'
				}).exec();
			},
			//加好友弹框
			modify: function(type,data) {
				this.modifyData = data
				this.isModify = !this.isModify
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				})
				if(this.isModify) {
					animation.bottom(0).step()
				}else{
					animation.bottom("-"+this.mHeight).step()
				}
				this.animationData = animation.export()
			},
			addFriendSubmit(fid) {
				this.fid = fid
				this.modify()
			},
			//去聊天页面
			toChatroom(id) {
				uni.navigateTo({
					url: '../chatroom/chatroom?id=' + id
				})
			},
			addFriendConfirm() {
				this.modify()
				uni.request({
					url: this.baseURL+'/friend/applyfriend',
					data: {
						uid: this.uid,
						fid: this.fid,
						msg: this.submitData
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							uni.showToast({
								title: '好友请求发送成功!',
								icon: 'none',
								duration: 2000
							})
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			addFriendCancel() {
				this.modify()
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '../../commons/css/style.scss';
.top-bar{
	border-bottom: 1px solid $uni-border-color;
	.search-view {
		padding-left: 30rpx;
		position: relative;
		.search {
			width: 600rpx;
			height: 60rpx;
			padding: 0 60rpx 0 20rpx;
			box-sizing: border-box;
			background: #f3f4f6;
			border-radius: 10px;
		}
		.searchicon {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			bottom: 26rpx;
			right: 20rpx;
		}
	}
	.top-bar-right {
		padding-right: 30rpx;
	}
}
.main {
	padding-top: 88rpx;
	.search-result{
		padding-top: 32rpx;
		.title{
			font-size: 44rpx;
			font-weight: 600;
			line-height: 60rpx;
			padding-left: 30rpx;
		}
		.list {
			padding-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
				margin-left: 30rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: $uni-border-radius-base;
			}
			.name {
				width: 480rpx;
				margin-left: 30rpx;
			}
			.list-right {
				margin-right: 30rpx;
				font-size: $uni-font-size-sm;
				width: 120rpx;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 24rpx;
				text-align: center;
				font-weight: 600;
				letter-spacing: 1rpx;
			}
			.send {
				background-color: #5b8bea;
				color: #FFFFFF;
			}
			.add {
				background-color: #27d68d;
				color: #FFFFFF;
			}
		}
	}
}
// 修改弹框
	.modify {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 1000;
		background-color: #FFFFFF;
		.modify-header {
			width: 100%;
			height: 88rpx;
			border-bottom: 1px solid $uni-border-color;
			padding-top: var(--status-bar-height);
			display: flex;
			align-items: center;
			justify-content: space-between;
			.modify-close {
				font-size: $uni-font-size-lg;
				line-height: 44rpx;
				padding-left: 32rpx;
			}
			.modify-title {
				line-height: 88rpx;
			}
			.modify-ok{
				font-size: $uni-font-size-lg;
				line-height: 44rpx;
				color: #73d5ff;
				padding-right: 32rpx;
			}
		}
		.modify-main {
			display: flex;
			padding: $uni-spacing-col-lg;
			flex-wrap: wrap;
			width: 100%;
			box-sizing: border-box;
			.modify-data {
				flex: 1;
				height: 386rpx;
				border-radius: $uni-border-radius-base;
				padding: 16rpx 20rpx;
				background-color: $uni-bg-color-grey;
			}
			.modify-pwd {
				width: 100%;
				height: 44rpx;
				border-radius: $uni-border-radius-base;
				padding: 16rpx 20rpx;
				margin-bottom: 44rpx;
				background-color: $uni-bg-color-grey;
			}
		}
	}
</style>
